<template>
    <div class="common-tooltip" ref="currentEl" @mouseenter="mouseenter($event)" @mouseleave="mouseleave($event)">
        <slot></slot>
    </div>
</template>

<script>
    import CommonService from '@/views/services/common.service'

    export default {
        value: String,
        expandKeyList: Array,
        data() {
            return {
                value: '',
                isHover: false,
                divTip: {},
                top: 0,
                left: 0,
                elWidth: 0,
                elHeight: 0,
            }
        },
        methods: {
            mouseenter(event) {
//                console.log('----------------mouseenter-------------------');
//                console.log(event);
//                console.log(event.fromElement.offsetTop);
                this.isHover = true;
                this.top = event.clientY;
                this.left = event.clientX;
                this.elHeight = event.offsetY;
                if (event.fromElement) {
                    this.elWidth = event.fromElement.offsetWidth;
                    let style = event.fromElement.style;
                    let isMore = this.calWidth(this.tip, this.elWidth, style);
                    if (isMore) {
                        this.show();
                    }
                }
            },
            mouseleave(event) {
//                console.log('----------------mouseout-------------------');
//                console.log(event.offsetLeft);
                this.isHover = false;
                this.hide();
            },
            calWidth(str, width, style) {
                if(!width){
                    return false;
                }
                let w = CommonService.getTextWidth(str, style);
                if (w + 20 > width) {
                    return true;
                }
                return false;
            },
            createTip(tipText) {
                if(this.divTip.style) {
                    this.divTip.style.display = 'none';
                }
                this.divTip = document.createElement("div");
                this.divTip.className = "common-tooltip-pop";
                this.divTip.innerHTML = tipText;
                this.divTip.style.position = 'fixed';
                this.divTip.style.top = (this.top - 50) + 'px';
//                console.log(this.divTip.style.top)
                this.divTip.style.left = (this.left - 50) + 'px';
                this.divTip.style.maxHeight = '300px';
                this.divTip.style.display = 'inline-block';
                document.body.append(this.divTip)
                this.finalHide(this.divTip);
            },
            show() {
                const me = this;
                if (this.enterable) {
                    if (this.showDelay) {
                        setTimeout(function () {
                            if (!me.isHover) {
                                return;
                            }
                            me.createTip(me.tip);
                        }, this.showDelay);
                    }else{
                        if (!me.isHover) {
                            return;
                        }
                        me.createTip(me.tip);
                    }
                }
            },
            hide() {
                const me = this;
                if (this.enterable) {
                    if (this.hideDelay) {
                        setTimeout(function () {
                            if (me.divTip.style && !me.isHover) {
                                me.divTip.style.display = 'none';
                            }
                        }, this.hideDelay);
                    }else{
                        if (me.divTip.style && !me.isHover) {
                            me.divTip.style.display = 'none';
                        }
                    }
                }
            },
            finalHide(obj){
                const me = this;
                setTimeout(function () {
                    if (obj.style) {
                        obj.style.display = 'none';
                    }
                }, 15000);
            }
        },
        watch: {},
        props: {
            tip: {
                type: [String,Number],
                default: ''
            },
            getTip: {
                type: [Function, Boolean],
                default: () => {
                    return this.tip;
                }
            },
            showDelay: {
                type: Number,
                default: 500
            },
            hideDelay: {
                type: Number,
                default: 1000
            },
            enterable: {
                type: Boolean,
                default: true
            }
        }
    }
</script>
